<template>

  <div class="resource-body">


    <div class="left-content">
        <div class="resource-search">
          <div class="resource-search-group">
            <div class="resource-search-group-title">
              <span>资源类型</span>
            </div>

            <div class="resource-search-group-body">
              <div class="group-body-item" v-for="resrourceClassification in resrourceClassificationList">
                <span>{{resrourceClassification.resourceClassificationName}}</span>
              </div>
            </div>
          </div>
        </div>
      <hr/>


        <div class="main-body" ref="mainBodyDiv">
          <div class="card-item-body" v-for="(resourceInfo,index) in resource.resourceCenterList" @click="looResourceCenterInfo(resourceInfo.uuid)" :key="index">
            <div class="card-content">
              <div class="card-item">
                <span class="card-title-font" >{{index+1}}. {{resourceInfo.title}}</span>
              </div>
              <div class="card-content-body">
                <span v-html="resourceInfo.content"></span>
              </div>

            </div>
          </div>

          <div class="load-more" v-show="!queryFlag">
            <span>没有更多了</span>
          </div>
        </div>

    </div>

    <div class="right-info">
      <div class="operation-info">
          <div class="operation-info-user">
            <span>{{user.userName}}</span>
            <span>积分{{user.integral}}</span>
          </div>
          <div class="operation-info-button">
            <button @click="uploadResource()">上传资源</button>
          </div>
      </div>
    </div>
  </div>

</template>
<style>
  #app {
    background-color: #f6f6f6;
  }
</style>
<style scoped>
  .resource-search{
    display: flex;
    flex-direction: column;
    margin-top: 22px;
    margin-left: 15px;
    margin-bottom: 10px;
  }
  .resource-body{
    margin: 10px auto;
    width: 80%;

    padding: 8px;
    min-height: 800px;
    display: flex;
    justify-content: flex-start;
  }
  .resource-search-group{
    display: flex;
    flex-direction: row;
    justify-content: start;
  }
  .resource-search-group-title{
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle!important;
    height: 40px;
    line-height: 40px;
  }
  .group-body-item{
    display: inline-block;
    background-color: #e5f2ff;
    color: #0084ff;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    padding: 5px;
    margin-left: 10px;
  }
  .resource-search-group-body{
    margin-left: 20px;
    display: inline-block;
    height: 40px;
  }
  .resource-header{
    margin: 10px;
  }

  .left-content{
    background-color: white;
    width: 85%;
  }
  .right-info{
    margin-left: 10px;
    width: 20%;
  }

  .operation-info{
    background-color: white;
    height: 100px;
    flex-direction: column;
    display: flex;
    justify-content: space-evenly;
  }
  .operation-info-user{
    text-align: center;
  }
  .operation-info-button{
    text-align: center;

  }
  .operation-info-button button{
    width: 100%;
    cursor: pointer;
    height: 32px;
    border: solid 1px blanchedalmond;
  }

  .main-body{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 10px;
    padding-bottom: -10px;
    margin-top: 10px;
  }
  .card-item-body{
    display: inline-block;
    padding: 10px 10px;
    border: solid 1px #eeeeee;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100%;
    height:  96px;
  }
  .card-item{
    display: inline-block;
    vertical-align: text-bottom;
  }
  .card-title-font{
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    vertical-align: middle;
  }
  .load-more{
    text-align: center;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
  }
  .card-item-body:hover{
    box-shadow: 0px 0px 8px #cccccc;
    cursor: pointer;
  }
  .card-content-body{
    margin-top: 10px;
    margin-left: 10px;
  }
</style>

<script>

    export default {
        data() {
            return {
              resource:{
                resourceCenterList:[],
                pageSize: 8,
                pageNum: 0,
                title:""
              },
              resrourceClassificationList:[],
              queryFlag:true,
              user:{
                userName:"",
                integral:""
              }
            }
        },
      created:function(){
        this.initResourceInfo();
        this.initResrourceClassification();
        this.initUserInfo();
      },
      methods:{
        uploadResource:function () {
          let uploadFileByUser = this.$router.resolve({
            name: 'UploadFileByUser'
          })
          window.open(uploadFileByUser.href, '_blank');
        },
        initResourceInfo:function () {
          this.$axios({
            method:"post",
            url:"/resourceCenter/resourceInfoUser/selectResourceInfoList",
            data:{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              title:this.title,
              resrourceClassificationList:[]
            }
          }).then(res=>{
              if (res.data.success === true){
                this.resource.resourceCenterList.push.apply(this.resource.resourceCenterList,res.data.data.list);
                this.resource.pageSize = res.data.data.pageSize;
                this.resource.pageNum = res.data.data.pageNum;
              } else{
                this.$message.error(res.data.msg)
              }
          })
        },
        initResrourceClassification:function () {
          this.$axios({
            method: "get",
            url: "/resourceCenter/resrourceClassification/selectResourceClassification"
          }).then(res=>{
            if (res.data.success === true) {
              this.resrourceClassificationList = res.data.data.list;
            }else{
              this.$message.error(res.data.msg);
            }
          })
        },
        looResourceCenterInfo:function (resourceId) {//查看资源详情
            this.$router.push({
              name:"ResourceInfo",
              query:{
                resourceId:resourceId
              }
            });
        },
        initUserInfo:function () {

            this.$axios({
              methods:"get",
              url:"/solvePlat/user/getUserIntegral",
            }).then(res=>{
              this.user = res.data;
            });

        }
      }
    }

</script>
